<template>
  <div class="log-analytics-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <el-card shadow="hover" class="card-blue">
          <div class="stat-card">
            <i class="stat-icon el-icon-user"></i>
            <div>
              <div class="stat-number">{{ stats.totalUsers }}</div>
              <div class="stat-label">总用户数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <el-card shadow="hover" class="card-blue">
          <div class="stat-card">
            <i class="stat-icon el-icon-document"></i>
            <div>
              <div class="stat-number">{{ stats.totalBlogs }}</div>
              <div class="stat-label">博客总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <el-card shadow="hover" class="card-blue">
          <div class="stat-card">
            <i class="stat-icon el-icon-user-solid"></i>
            <div>
              <div class="stat-number">{{ stats.activeUsers }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <el-card shadow="hover" class="card-blue">
          <div class="stat-card">
            <i class="stat-icon el-icon-view"></i>
            <div>
              <div class="stat-number">{{ stats.todayBlogs }}</div>
              <div class="stat-label">今日博客数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :xs="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <div class="card-header">
            <h3>活跃用户统计</h3>
          </div>
          <div ref="activeUserChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <div class="card-header">
            <h3>博客数据统计</h3>
          </div>
          <div ref="blogStatsChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, ref, nextTick } from 'vue';
import { Search } from '@element-plus/icons-vue';
import {getPostData} from "../services/commuServ"
import {getUserDataForLog} from "../services/userServ.ts"
import{error} from "../tools/messageBox.ts"

export default {
  components: { Search },
  setup() {
    // 图表引用
    const activeUserChart = ref(null);
    const blogStatsChart = ref(null);
    
    // 图表实例
    let activeUserChartInstance = null;
    let blogStatsChartInstance = null;
    
    // 模拟数据
    const stats = ref({
      totalUsers: 4562,
      totalBlogs: 1204,
      activeUsers: 842,//今日活跃用户数
      todayBlogs: 12,//今日博客数
      userData:[
        ['6月10日',100],
        ['6月11日',140],
        ['6月12日',200],
        ['6月13日',100],
        ['6月14日',2]
      ],
      blogData:[
        ['6月10日',100],
        ['6月11日',140],
        ['6月12日',200],
        ['6月13日',100],
        ['6月14日',2]
      ]
    });


    // 初始化图表
    const initCharts = () => {
      // 活跃用户图表
      if (!activeUserChartInstance && activeUserChart.value) {
        activeUserChartInstance = echarts.init(activeUserChart.value);
      }
      
      // 博客统计图表
      if (!blogStatsChartInstance && blogStatsChart.value) {
        blogStatsChartInstance = echarts.init(blogStatsChart.value);
      }
      
      // 活跃用户图表配置
      const activeUserOption = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: stats.value.userData.map(x => x[0]),
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          }
        },
        series: [{
          name: '活跃用户',
          type: 'line',
          data: stats.value.userData.map(x => x[1]),
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 3,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#3398DB' },
              { offset: 1, color: '#42C6FF' }
            ])
          },
          itemStyle: {
            color: '#3398DB',
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(66, 198, 255, 0.5)' },
              { offset: 1, color: 'rgba(51, 152, 219, 0.1)' }
            ])
          }
        }]
      };
      
      // 博客统计图表配置
      const blogStatsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: stats.value.blogData.map(x => x[0]),
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          }
        },
        series: [{
          name: '发布量',
          type: 'bar',
          data: stats.value.blogData.map(x => x[1]),
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#1e90ff' },
              { offset: 1, color: '#00bfff' }
            ])
          },
          barWidth: '30%',
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00bfff' },
                { offset: 1, color: '#1e90ff' }
              ])
            }
          }
        }]
      };
      
      if (activeUserChartInstance) {
        activeUserChartInstance.setOption(activeUserOption);
      }
      
      if (blogStatsChartInstance) {
        blogStatsChartInstance.setOption(blogStatsOption);
      }
    };
    
    // 当窗口大小变化时，重新调整图表大小
    const handleResize = () => {
      if (activeUserChartInstance) {
        activeUserChartInstance.resize();
      }
      if (blogStatsChartInstance) {
        blogStatsChartInstance.resize();
      }
    };
    
    onMounted(async () => {
      try {
        const res1=await getPostData();
        stats.value.totalBlogs=res1.data.totalBlogs;
        stats.value.todayBlogs=res1.data.todayBlogs;
        stats.value.blogData=res1.data.blogData;
      } catch (err) {
        error("获取帖子数据失败")
      }
      try {
        const res2=await getUserDataForLog();
        stats.value.totalUsers=res2.data.totalUsers;
        stats.value.activeUsers=res2.data.activeUsers;
        stats.value.userData=res2.data.userData;
      } catch (err) {
        error("获取用户数据失败")
      }      
      nextTick(() => {
        initCharts();
      });
      window.addEventListener('resize', handleResize);
    });
    
    return {
      activeUserChart,
      blogStatsChart,
      stats,
    };
  }
};
</script>

<style scoped>
.log-analytics-container {
  padding: 20px;
  background: linear-gradient(180deg, #f5f9ff 0%, #e6f3ff 100%);
  min-height: 100vh;
}

.header-row {
  margin-bottom: 30px;
  text-align: center;
}

.header-content h1 {
  color: #1e40af;
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.header-content p {
  color: #4b5563;
  font-size: 1.1rem;
}

.stats-cards {
  margin-bottom: 30px;
  padding-top: 90px;
}

.card-col {
  margin-bottom: 20px;
}

.el-card {
  border-radius: 10px;
  border: none;
}

.card-blue {
  background: linear-gradient(to right bottom, #1e88e5, #64b5f6);
  color: white;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 15px 20px;
}

.stat-icon {
  font-size: 2.5rem;
  margin-right: 20px;
  opacity: 0.8;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.9;
}

.chart-section {
  margin-bottom: 30px;
}

.chart-card {
  height: 600px;
  background-color: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  color: #1e40af;
}

.chart {
  height: 340px;
  width: 100%;
}


/* 响应式调整 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .chart-card {
    height: auto;
    min-height: 400px;
  }
  
  .stat-card {
    padding: 10px 15px;
  }
  
  .stat-icon {
    font-size: 2rem;
    margin-right: 15px;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .stat-card {
    padding: 8px 12px;
  }
  
  .stat-icon {
    font-size: 1.8rem;
    margin-right: 10px;
  }
  
  .stat-number {
    font-size: 1.4rem;
  }
}
</style>